<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root" style="width:200px;height:200px;background:skyblue;border:1px solid;"></div>
    <button>点我发送请求1</button>
    <button>点我发送请求2</button>
</body>
<script>
    // 跨域：查看资源是否在同一个服务上（协议，域名，端口号），有一个不同则会跨域cors
    // 页面的地址所在的服务：http://localhost:63342/   http://127.0.0.1:8099/
    // 请求的地址所在的服务：http://zhangpeiyue.com:8099
    // 获取所有的button标签生成一个数组赋值给常量btns
    const btns = document.querySelectorAll("button");
	btns[0].onclick = function(){
		// 1- 生成xhr实例
        const xhr = new XMLHttpRequest();
		xhr.responseType = "json";// 可以将获取的响应体的格式指定为JSON对象
		// 2- 设置发送请求的方式以及地址
        // http://zhangpeiyue.com/info get
        // 第一个参数是请求方式，第二个参数是请求地址
        xhr.open("get","/info");
		// 3- 发送请求
        xhr.send();
		// 4- 获取响应相关信息,当获取到响应信息后才会执行
        xhr.onload = function(){
			// console.log("onload",xhr.response);// 响应体信息,默认值是字符串
            // 将字符串转为对象的方案一：
			// console.log(JSON.parse(xhr.response));

            // 将字符串转为对象的方案二：在创建实例后，指定响应体的数据格式
			// console.log(xhr.response);
            document.querySelector("#root").innerHTML = `
                <p>ok:${xhr.response.ok}</p>
                <p>msg:${xhr.response.msg}</p>
            `
        }
		console.log("over")
    }
</script>
</html>